<template>
  <div>
    <div class="right">
      <!--   顶部内容   -->
      <div class="right-one">
        <div class="one-item-1">
          <b><i :class="typeInfo.icon" style="font-size: 25px"></i> &nbsp;&nbsp; {{typeInfo.title}} </b>
          <el-input v-model="queryParams.title"
                    placeholder="搜索任务"
                    suffix-icon="el-icon-search"
                    @keyup.enter.native="getList"
                    style="width: 70%; margin-left: 40px"
                    size="small">
          </el-input>
        </div>
        <div class="one-item-2">
          <div class="one-item-3">
<!--            <b><i class="iconfont icon-sangediandian" style="font-size: 20px"></i> &nbsp;&nbsp; </b>-->
          </div>
        </div>
      </div>
      <!--   主体内容   -->
      <div class="right-two">
        <div style="margin-bottom: 10px" v-for="(item, index) in todoList" @contextmenu.stop.prevent="handleItem($event, item, index)">
          <div class="todoItem" @click.stop="changeItemShow(item, index)">
            <!-- 主内容 -->
            <div style="width: 75%;cursor: pointer;">
              <i class="iconfont icon-round" style="font-size: 20px"></i> &nbsp;&nbsp;
              <span>{{item.title.length > 37 ? item.title.substr(0, 35) + "..." : item.title}}</span>
            </div>
            <div style="width: 15%;font-size: 14px;">
              <span>{{item.createTime}}</span>
            </div>
            <div class="todoItemIcon">
              <el-tooltip :content="item.priority === 1 ? '设置重要' : '取消重要'" placement="top">
                <i v-if="item.priority === 1" class="iconfont icon-shoucang4" style="font-size: 25px;color: #F56C6C" @click.stop="handleStatus(item,2)"></i>
                <i v-if="item.priority === 2" class="iconfont icon-star" style="font-size: 25px;color: #F56C6C" @click.stop="handleStatus(item,1)"></i>
              </el-tooltip>
            </div>
            <div class="todoItemIcon" @click.stop="allotTask(item)" v-if="item.status === '1'">
              <el-tooltip :content="userLead ? '分配任务' : '领取任务'" placement="top">
                <i v-if="userLead" class="iconfont icon-jiancharenwufenpei" style="font-size: 25px" ></i>
                <i v-if="!userLead" class="iconfont icon-renwujieshou" style="font-size: 25px"></i>
              </el-tooltip>
            </div>
          </div>
          <div v-if="item.show" class="todoItem-info">
            <el-descriptions :colon="false" style="padding: 5px" :column="4" :labelStyle="{fontWeight: 900}">
              <el-descriptions-item label="任务内容:" :span="4">
                <div style="width: 100%;height: 50px;overflow-y: auto;">
                  {{item.title}}
                </div>
              </el-descriptions-item>
              <el-descriptions-item label="发布时间:">{{item.createTime}}</el-descriptions-item>
              <el-descriptions-item label="签收人:">{{item.qsr}}</el-descriptions-item>
              <el-descriptions-item label="签收时间:">{{item.qssj}}</el-descriptions-item>
              <el-descriptions-item label="任务状态:">
                <el-tag v-if="item.status === '1'" type="warning" size="small">未处理</el-tag>
                <el-tag v-else-if="item.status === '2'" size="small">处理中</el-tag>
                <el-tag v-else-if="item.status === '3'" type="success" size="small">已处理</el-tag>
              </el-descriptions-item>
              <el-descriptions-item label="备注:" :span="4">
                <div style="width: 100%;height: 50px;overflow-y: auto;color: red">
                  {{item.bz}}
                </div>
              </el-descriptions-item>
              <el-descriptions-item label="附件:">
                <div style="width: 100%;height: 60px;overflow-y: auto;">
                  <div class="fjConten" @click="clickFile(obj)" v-for="obj in item.fjList">{{obj.fjname}}</div>
                </div>
              </el-descriptions-item>
            </el-descriptions>
          </div>
        </div>
        <RightItem ref="rightItem" @handleClick="handleClick"></RightItem>
        <updateForm v-if="showForm" :showForm="showForm" :formInfo="formInfo" @closeForm="closeForm"></updateForm>
        <rwUserInfo v-if="showUser" :show="showUser" :userList="rwUserList" :data="currentData" @closeList="closeForm"></rwUserInfo>
      </div>
      <!--   底部内容   -->
      <div class="right-three">
        <div class="three-item">
          <!-- 主内容 -->
          <div class="three-item-left">
<!--            <i class="iconfont icon-round" style="font-size: 20px"></i> &nbsp;&nbsp;-->
            <el-input v-model="todoForm.title"
                      type="textarea"
                      placeholder="新建任务(按回车发布任务)"
                      style="width: 94%"
                      :rows="2"
                      @keyup.enter.native="addTodoData"
            >
            </el-input>
          </div>
          <div class="three-item-right">
            <!-- 附件 -->
            <el-popover
              placement="top"
              width="325"
              trigger="click">
              <div @paste="handlePaste" class="drop-area">
                <div v-if="copeList.length > 0">
                  <div v-for="item in this.copeList">
                    <i class="iconfont icon-wendang"></i> {{item}}
                  </div>
                </div>
                <div v-else>将文件粘贴到这里</div>
              </div>
              <div slot="reference" class="three-item-icon">
                <i  class="iconfont icon-fujian" style="font-size: 25px"></i>
              </div>
            </el-popover>
            <!-- 备注 -->
            <el-popover
              placement="top"
              width="400"
              trigger="click">
              <div style="height: 130px">
                <el-input
                  type="textarea"
                  :rows="6"
                  placeholder="请输入备注"
                  v-model="todoForm.bz">
                </el-input>
              </div>
              <div slot="reference" class="three-item-icon">
                <i  class="iconfont icon-beizhu" style="font-size: 25px"></i>
              </div>
            </el-popover>
            <!-- 收藏 -->
            <div slot="reference" class="three-item-icon" @click="handlePriority">
              <i v-if="todoForm.priority === 1" class="iconfont icon-shoucang4" style="font-size: 25px; color: #E6A23C"></i>
              <i v-if="todoForm.priority === 2" class="iconfont icon-star" style="font-size: 25px; color: #E6A23C"></i>
            </div>

          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { addTodo, getFjById, listTodo, updateTodo, updateStatus, queryWyUser, delTodo } from '@/api/gd/todo'
import { allListFj } from '@/api/gd/fj'
import axios from 'axios'
import { getToken } from '@/utils/auth'
import RightItem from '@/views/gd/todo/componse/RightItem.vue'
import updateForm from '../updateForm.vue'
import rwUserInfo from './rwUserInfo.vue'
export default {
  name: 'dbList',
  components: { RightItem, updateForm, rwUserInfo },
  props: {
    typeInfo: {
      type: Object
    },
    userLead: {
      type: Boolean
    }
  },
  data() {
    return {
      // 待办查询条件
      queryParams: {
        title: '',
        status: '1'
      },
      // 待办列表
      todoList: [],
      // 复制列表
      copeList: [],
      // 任务数据
      todoForm: {
        title: '',
        bz: '',
        priority: 1,
        fjid: ''
      },
      // 上传请求头
      uploadHeaders: { 'Authorization': 'Bearer ' + getToken(), 'Content-Type': 'multipart/form-data' }, // 如果需要CSRF保护的话
      // 显示表单
      showForm: false,
      // 表单详情
      formInfo: {},
      // 当前数据
      currentData: {},
      // 分配用户列表
      rwUserList: [],
      // 显示用户
      showUser: false,
      time: {}
    }
  },
  created() {
    this.getList()
    this.time = setInterval(() => {
      this.getList()
    }, 30000);
  },
  // 组件销毁前调用
  beforeDestroy() {
    clearInterval(this.time);
    console.log("关闭定时_任务发布")
  },
  methods: {
    // 查询列表
    getList() {
      // 查询待办数据
      listTodo(this.queryParams).then(res => {
        this.todoList = res
      })
    },
    // 修改选项状态
    async changeItemShow(item, index) {
      let obj = item
      if (obj.show !== undefined) {
        obj.show = !obj.show
      }else {
        obj.show = true
      }
      // 通过当前的附件id查询当前附件列表
      if (item.fjid !== undefined && item.fjid !== null && item.fjid !== "") {
        await allListFj(item.fjid).then(res => {
          obj.fjList = res
        })
      }
      this.todoList.splice(index, 1, obj)
    },
    // 点击文件
    clickFile(obj) {
      getFjById(obj.fjid, 'blob').then(response => {
        const binaryData = [];
        binaryData.push(response);
        let url = window.URL.createObjectURL(new Blob(binaryData, { type: 'application/octet-stream' }));
        const link = document.createElement('a');
        link.href = url
        link.download = obj.fjname;
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
      })
    },
    // 复制粘贴文件
    handlePaste(event) {
      // 获取剪贴板中的数据
      const items = event.clipboardData.items;
      for (let i = 0; i < items.length; i++) {
        if (items[i] !== null) {
          // 判断类型
          if (items[i].type === 'image/png'  // png
            || items[i].type === 'image/jpeg'  // jpg
            || items[i].type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'  // excel
            || items[i].type === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' // doc
            || items[i].type === 'application/vnd.ms-excel' // excel
            || items[i].type === 'application/pdf' // pdf
            || items[i].type === 'application/msword'  // doc
            || items[i].type === 'application/zip'  // zip
          ) {
            const file = items[i].getAsFile();
            this.handleFile(file);
          }else {
            this.$message.error("当前文件不支持上传！")
          }
        }
      }
    },
    // 上传文件
    handleFile(file) {
      debugger
      // 提取文件名并添加到 filenames 数组中
      this.copeList.push(file.name);
      // 处理文件，例如上传
      const formData = new FormData();
      formData.append('file', file);
      axios.post(this.uploadSrc + '/gd/todo/file/batchUpload', formData, {
        headers: this.uploadHeaders
      })
        .then(response => {
          let fileId = ""
          if (this.todoForm.fjid !== undefined && this.todoForm.fjid !== null && this.todoForm.fjid !== "") {
            fileId = this.todoForm.fjid
          }
          fileId += response.data.fjid+","
          this.$set(this.todoForm, 'fjid', fileId)
        })
        .catch(error => {
          console.error('文件上传失败:', error);
        });
    },
    // 添加任务
    addTodoData() {
      if (this.todoForm.id !== undefined) {
        updateTodo(this.todoForm).then(res => {
          if (res.code === 200) {
            this.$message.success("修改成功！")
          }
        }).finally(async res => {
          this.getList()
        })
      }else {
        addTodo(this.todoForm).then(res => {
          if (res.code === 200) {
            this.$message.success("任务创建成功！")
          }
        }).finally(async res => {
          this.getList()
          this.$set(this, 'todoForm',  {
            title: '',
            bz: '',
            priority: 1,
            fjid: ''
          })
          this.$set(this, 'copeList', [])
        })
      }
    },
    // 切换当前的收藏状态
    handlePriority() {
      if (this.todoForm.priority === 1) {
        this.$set(this.todoForm, 'priority', 2)
      }else {
        this.$set(this.todoForm, 'priority', 1)
      }
    },
    /**
     * 选项右键菜单
     */
    handleItem(event, item, index) {
      event.preventDefault();
      console.log("this.typeInfo.type", this.typeInfo.type)
      this.$refs.rightItem.show(event, item, index, this.typeInfo.type);
    },
    // 更改状态
    handleStatus(item, status) {
      let obj = {
        id: item.id,
        priority: status
      }
      updateStatus(obj).then(res => {
        if (res.data) {
          this.getList()
        }
      })
    },
    // 分配任务或者领取任务
    allotTask(item) {
      if(this.userLead) {  // 分配任务
        // 查询文员角色中所有用户
        queryWyUser().then(res => {
          this.currentData = item
          this.rwUserList = res
          this.showUser = true
        })
      }
    },
    // 右键点击item方法
    handleClick(action, item, index) {
      if (action === 'chakan') {  // 查看或者关闭
        this.changeItemShow(item, index)
      }else if (action === 'xiuggai') {  // 修改
        this.showForm = true
        this.formInfo = item
      }else if (action === 'shanchu') {  // 删除
        this.$modal.confirm('是否确认删除任务？').then(() => {
          return delTodo(item.id);
        }).then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        }).catch(() => {
        })
      }
    },
    // 关闭表单
    closeForm() {
      this.showForm = false
      this.showUser = false
      this.getList()
    },


  }
}
</script>

<style scoped>
.right {
  //margin-left: 15%;
  height: 100vh;
  width: 85%;
  position: fixed;
  background-color: #728CFF;
}
.right-one {
  width: 100%;
  height: 10%;
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  font-size: 18px;
  color: white;
}
.one-item-1 {
  width: 70%;
  padding-left: 10px;
  font-size: 20px;
  cursor: pointer;
}
.one-item-2 {
  width: 30%;
  padding-left: 10px;
  cursor: pointer;
}
.one-item-3 {
  width: 25px;
  height: 25px;
  text-align: center;
  line-height: 25px
}
.one-item-3:hover {
  background-color: #3C66FF;
  color: white;
  border-radius: 4px;
}
.right-two {
  height: 65%;
  overflow-y: auto;
  padding: 0px 100px;
}
.todoItem {
  width: 85%;
  background-color: #F2F6FC;
  height: 50px;
  line-height: 50px;
  padding-left: 20px;
  font-size: 20px;
  display: flex;
}
.todoItem-info {
  width: 85%;
  background-color: white;
  height: 240px;
  line-height: 50px;
  padding-top: 3px;
  padding-left: 5px;
  font-size: 20px;
  display: flex;
}
.right-three {
  height: 25%;
  width: 100%;
  display: flex;
  padding: 20px 100px;
}
.three-item {
  width: 85%;
  background-color: #F2F6FC;
  height: 70px;
  line-height: 70px;
  font-size: 20px;
  display: flex;
  padding-left: 20px;
  border-radius: 5px;
}
.three-item-left {
  width: 80%;
  height: 70px;
  cursor: pointer;
  line-height: 65px;
  //background-color: cyan
}
.three-item-right {
  width: 20%;
  height: 70px;
  cursor: pointer;
  color: #E6A23C;
  display: flex;
}
.three-item-icon {
  width: 50px;
  height: 70px;
  text-align: center;
  color: black;
  line-height: 70px;
}
.three-item-icon:hover {
  background-color: #E4E7ED;
  color: #409EFF;
}
.drop-area {
  width: 300px;
  height: 200px;
  border: 2px dashed #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.fjConten {
  width: 100%;
  cursor: pointer;
  padding: 1px 5px;
  border-radius: 4px;
}
.fjConten:hover {
  background-color: #EBEEF5;
  color: #409EFF;
}
.todoItemIcon {
  width: 5%;
  cursor: pointer;
  color: #E6A23C;
  text-align: center;
  font-size: 25px;
}
.todoItemIcon:hover {
  background-color: #EBEEF5;
  color: #409EFF;
}
</style>
